<template>
  <div class="login-box">
    <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
    <el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
      <span class="login-title">欢迎登录</span>
      <div style="margin-top: 5px"></div>
      <el-form-item label="手机号" prop="loginName">
        <el-col :span="12">
          <el-input type="text" v-model="loginForm.loginName"></el-input>
        </el-col>
        <el-button type="primary" @click="getMsgCode()" style="margin-left: 6px;" >获取验证码</el-button>
      </el-form-item>
      <el-form-item label="密码" prop="loginPassword">
        <el-col :span="22">
          <el-input type="password" v-model="loginForm.loginPassword"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loginSubmit('loginForm')">登录</el-button>
        <el-button type="primary" @click="onRegit('loginForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from 'qs'
    export default {
        name: "login",
        data: () => ({
          loginForm: {
            loginName: '',
            loginPassword: ''
          },
          // 表单验证，需要在 el-form-item 元素中增加 prop 属性
          loginFormRules: {
            loginName: [
              {required: true, message: '账号不可为空', trigger: 'blur'}
            ],
            loginPassword: [
              {required: true, message: '密码不可为空', trigger: 'blur'}
            ]
          }
        })
      ,methods: {
        getMsgCode(){
          if(this.loginForm.loginName){
            let that = this;
            this.$http.post('/api/sms_send', qs.stringify({
            　　//这里是传参数
                phone:this.loginForm.loginName,
                tpl_id:'192401',
                key:'a3d4768e8ff5a5805eadec7faac53b38'
            })).then(function (res) {
                that.$message({
                  showClose: true,
                  message: res.data.reason,
                  type: 'success'
                });
            }).catch(function (err) {
                console.log(err);
            });
          }else{
            this.$message.error('请输入手机号哦！');
          }
        },
        loginSubmit(formName) {
          // 为表单绑定验证功能
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
              console.log("to loginSuccess")
              $.ajax({
                type: "post",
                url: "/users/login",
                async: true,
                timeout: 10000,
                data: {
                  employeeCode: this.loginForm.loginName,
                  userPwd: this.loginForm.loginPassword,
                  loginType: "web",
                  loginTime: Date.now()
                },
                success: function(data) {
                  if(data.state <= 0) {
                    layer.msg(data.msg, {
                      icon: 0,
                      time: 1000
                    });
                  } else {
                    localStorage.setItem("qdht_manager_name", data.userName);
                    localStorage.setItem("qdht_manager_dept", data.deptName);
                    localStorage.setItem("qdht_manager_update_time", getDate(new Date(data.update_time)));
                    localStorage.setItem("qdht_manager_jobs", data.jobs);
                    localStorage.setItem("qdht_manager_banci", data.banci);
                    localStorage.setItem("employee_code", data.employee_code);
                    localStorage.setItem('qdht_manager_token',data.token);

                    //console.log("data.token=",data.token);

                    layer.msg('登录成功！', {
                      icon: 1,
                      time: 2000
                    },function () {
                      this.$router.push("/file");
                    });
                  }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  layer.msg("请求超时!", {
                    icon: 6,
                    time: 700
                  });

                }
              });

            } else {
              return false;
            }
          });
        }
      }
    }
</script>

<style scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px palegreen;
  }
  .login-title {
    display: block;
    text-align: center;
    margin: 0 auto 40px auto;
    color: #66CD00;
    font-size: 30px;
    font-weight: bold;
  }
</style>
